<template>
  <div>
    <router-view />
    <cube-tab-bar class="botnav" v-model="selectedLabel" show-slider @click="clickHandler" @change="changeHandler">
      <cube-tab style="font-size : 0.6em" v-for="(item, index) in tabs" :label="item.label" :key="index">
        <i slot="icon" style="font-size : 35px" :class="item.icon"></i>
      </cube-tab>
    </cube-tab-bar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedLabel: "首页",
      tabs: [
        {
          label: "首页",
          icon: "cubeic-home"
        },
        {
          label: "分类",
          icon: "cubeic-tag"
        },
        {
          label: "搜索",
          icon: "cubeic-search"
        },
        {
          label: "购物车",
          icon: "cubeic-mall"
        },
        {
          label: "我的",
          icon: "cubeic-person"
        }
      ]
    };
  },
  methods: {
    clickHandler (label) {
      console.log(label);
    },
    //点击与自身不同的其他导航
    changeHandler (label) {
      switch (label) {
        case "首页":
          this.$router.push({ path: "/botnav/index" });
          break;
        case "分类":
          this.$router.push({ path: "/botnav/list" });
          break;
        case "搜索":
          this.$router.push({ path: "/botnav/search" });
          break;
        case "购物车":
          this.$router.push({ path: "/botnav/cart" });
          break;
        case "我的":
          this.$router.push({ path: "/botnav/mine" });
          break;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.cube-tab-bar.botnav
  position fixed
  bottom 0
  left 0
  z-index 1000
  width 100%
  background #fff
  .cube-tab
    i
      font-size 1.5em
</style>

